<template>
  <div class="warpper">
    账号:<input type="text" v-model='accout'><br><br>
    密码:<input type="text" v-model='password'><br><br>
    性别: 男 <input type="radio" name='gender' value='man' v-model="sex">
    女<input type="radio" name='gender' value="woman" v-model="sex"><br><br>
    爱好 抽烟<input type="checkbox" value="smoke" v-model="hobby">
    喝酒<input type="checkbox" value="drink" v-model="hobby">
    打豆豆<input type="checkbox" value="hit beans" v-model="hobby"><br><br>
    所属校区:
    <select name="" id="" v-model="reelect">
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="shenzhen">深圳</option>
      <option value="wuhan">武汉</option>
      <option value="chengdu">成都</option>
      <option value="xian">西安</option>
    </select><br><br>
    其他信息:<textarea v-model="other"></textarea><br>
    <input class="inp" type="checkbox" v-model="once"> 阅读并接受协议 《<a href="#">用户协议</a>》<br>
    <button id="btn">提交</button>
  </div>
</template>

<script>
export default {
  name: 'From',
  data() {
    return {
      accout: '',
      password: '',
      sex: '',
      hobby: [],
      reelect: 'wuhan',
      other: '',
      once: '',
    }
  },
}
</script>

<style scoped>
.warpper {
  margin-top: 25px;
  box-shadow: 0 0 10 #aef;
}

.inp {
  margin-top: 18px;
}

#btn {
  font-size: 20px;
  margin-top: 10px;
  background-color: rgb(204, 220, 220)158, 160, 0.335;
}
</style>